﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 	<meta http-equiv="Content-Language" content="zh-CN" /> -->
<!-- 	<meta charset="utf-8" /> -->
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
	<title>机器人</title>
	<link href="css/index_bj.css" rel="stylesheet" type="text/css" />
	<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
	<script src="webrtcstreamer.js" type="text/javascript"></script>
	<script src="libs/adapter.min.js" type="text/javascript"></script>
</head>
<body style="background: #EFF3FD">
<!--	<div class="zhezhao" id='zhezhao'>
		<div class="tankuang">
			<div id="header">
				<span>输入通讯地址</span>
			</div>
			<div>
				<input id="adr" value="10.94.192.203:9002"/>
			</div>
			<div id="confirm_btn" onclick="initSocket()">确认</div>
		</div>
	</div>-->
	<div id="top_div" class="top_line line_red" style="box-shadow: 0px 16px 54px 0px rgba(176,11,3,0.31);">
	</div>
	<div id="center_div">
		<div id="dv_free" style="width:100%;height:100%;display: none;text-align: center;">
			<div id="dv_top" class="top_bar bar_yellow " style="padding-bottom: 7%;">
				<div class="top_bar bar_red" style="height: 70%;padding-top: 5%;">
				</div>
			</div>
<!-- 			<div style="width:50%;height: 27%;margin:0 auto;margin-top:25%;background-image: url('{$SITE_URL}/public/static/jhp/img/logo_zy.png');background-size:100% 100%;"> -->
<!-- 			</div> -->
			<div class="home_content">
				<div class="home_content_logo">
					<img src="img/logo_zy.png"  style="width: 100%;height: 100%" alt="" />
				</div>
				<div id="free_msg" style="display: none">
					<div style="width: 70%;margin: -10% auto 11.2%">
						<img src="img/welcome.png"  style="width: 100%;height: 100%" alt="" />
					</div>
				</div>
				<div id="over_msg" style="display: none;">
					<div style="width: 90%;margin: -7% auto 11.2%">
						<img src="img/welcome_again.png"  style="width: 100%;height: 100%" alt="" />
					</div>
				</div>
			</div>
			<div id="free_msg_text">
				<span style="color: #C7000B;line-height: 21vw">
					加油机器人为您服务
				</span>
<!--			   <div style="background: #EFF3FD;border-radius: 15px; width: 90%;margin: 0 auto;color: #555555">-->
<!--				   <span style="font-weight: bold">加油机器人为您服务</span></div>-->
			</div>
			<div id="over_msg_text"><span style="color: #C7000B;line-height: 10.5vw">本次加油已完成<br/>可以驶离加油位</span></div>

			<div id="dv_bottom" class="bottom_bar bar_yellow " style="padding-bottom: 5%;">
				<div class="bottom_bar bar_red" style="height: 70%;">
				</div>
			</div>
		</div>
		<div id="dv_working" style="display: none">
			<div id="msg_status" class="msg_status text_yellow" >
			</div>
			<div id="auth_car_no" class="car_no">京A8437DJ</div>
			<div id="msg_title" class="msg_title">
				<div id="msg_bg" class="msg_bg_yellow">
					<div id="msg_car" class="msg_car text_black"></div>
					<div id="msg_font" class="msg_font text_black">请停车</div>
				</div>
			</div>
			<div class="msg_detail">
				<div id="normal_msg" style="display:none">
					<div style="font-size: 4.5vw;font-weight: bold;line-height: 6vw;text-align: center;">
						请把车停在可扫描范围内
					</div>
					<div style="font-size: 3.8vw;font-weight: 400;line-height: 4vw;text-align: left;">
						Please park your car within scanable rang
					</div>
				</div>
				<div id="again_msg" style="display:none;margin-top: 3%;">
					<div id="again_text" style="font-size: 6vw;font-weight: bold;line-height: 6vw;text-align: center;">
						请您把车辆往<span style="color: #FF0000;">右侧</span>挪动
					</div>
				</div>
				<div id="wait_msg" style="display:block;margin-top: -2%;">
					<div style="width: 100%;background: #FFFFFF;box-shadow: 0px 8px 27px 0px rgba(4,77,2,0.14);border-radius: 10px;padding: 39px 30px;box-sizing: border-box;display: flex">
						<div style="flex:1;font-size: 4vw; font-weight: bold;line-height: 5.8vw">
							<div>操作顺序:</div>
							<div>①<span style="color: #FF0000 ">熄火并解锁油箱盖</span></div>
							<div>②昆仑好客e站App下单</div>
							<div>③选择机器人加油</div>
						</div>
						<div style="width: 30%">
							<img style="width: 100%" src="img/qr_code.png" alt="">
						</div>
					</div>
<!--					<div style="text-align: center;font-size: 4.8vw;font-weight: 400;line-height: 6vw;">-->
<!--						您已停好车辆，请使用昆仑 好客e站APP下单，下单请 选择机器人加油，-->
<!--					</div>-->
<!--					<div style="text-align: center;font-size: 5.5vw;color:#FF0000;font-weight:bold;line-height: 12vw;">-->
<!--						请您熄火 并解锁油箱盖 -->
<!--					</div>-->
				</div>
				<div id="refueling_msg" style="display:none">
					<div class="finish_oil_content">
						<div class="finish_oil_content-item">
							<div>油品:</div>
							<div class="li_right" id="oil_type">#95</div>
						</div>
						<div class="finish_oil_content-item">
							<div>金额:</div>
							<div class="li_right" id="oil_money">200<span>元</span></div>
						</div>
						<div class="finish_oil_content-item">
							<div>油量:</div>
							<div class="li_right" id="oil_vol">20<span>升</span></div>
						</div>
					</div>
				</div>
				<div id="finish_msg" style="display:none">
					<div class="finish_oil_content">
						<div class="finish_oil_content-item">
							<div>枪号:</div>
							<div class="li_right gun_no" id="order_gun">05</div>
						</div>
						<div class="finish_oil_content-item">
							<div style="width:50%;">油品:</div>
							<div class="li_right" id="order_type">#95</div>
						</div>
						<div class="finish_oil_content-item">
							<div style="width:50%;">单价(元/升):</div>
							<div class="li_right" id="order_price">#95</div>
						</div>
						<div class="finish_oil_content-item">
							<div style="width:50%;">金额:</div>
							<div class="li_right" id="order_money">200<span>元</span></div>
						</div>
						<div class="finish_oil_content-item">
							<div style="width:50%;">油量:</div>
							<div class="li_right" id="order_vol">20<span>升</span></div>
						</div>
					</div>
				</div>
				<div id="auth_show" style="display: none;">
					<div class="finish_oil_content">
						<div class="finish_oil_content-item">
							<div>枪号:</div>
							<div class="li_right gun_no">05</div>
						</div>
						<div class="finish_oil_content-item">
							<div>油品:</div>
							<div class="li_right" id="auth_type">#0</div>
						</div>
						<div class="finish_oil_content-item">
							<div>金额:</div>
							<div class="li_right" id="auth_money">200元</div>
						</div>
					</div>
					<div style="width:100%;height:20vh;margin-top:3vh;">
						<img style="width: 100%;height: 100%" src="img/refuel_img.jpg" alt="" />
					</div>
				</div>
				<div id="warning_show" style="display: none;">
					<div class="warning_bg" style="display: flex;flex-direction: column;justify-content: center;align-items: center">
						<img class="img3" style="width:50%;margin-bottom: 10%" src="img/warning_y.png" alt="" />
						<div style="font-weight: bold;font-size: 9vw;line-height:13vw;color: #ffffff;text-align: center">您已进入<br/>机器人工作范围<br/>请尽快离开其工作区域！</div>
					</div>
				</div>
			</div>
			<div class="signal_box">
				<div id="stop_show" style="display: none">
					<div class="signal_car"></div>
				</div>
				<div id="finish_show" style="display: none;width: 88%;">
<!-- 					<div> -->
<!-- 						<div id="finish_car" class="signal_car" style="left:0;display: none;"> -->
<!-- 						</div> -->
<!-- 						<div class="signal_info"> -->
<!-- 							<table id="finish_table" style="display: none" class="table_sy table_text"> -->
<!-- 								<tr><td>#<span id="order_type">92</span></td></tr> -->
<!-- 								<tr><td>单价(元) <span id="order_price">6.5</span></td></tr> -->
<!-- 								<tr style="background-color: #EEEEEE"><td>加油金额(元)</td></tr> -->
<!-- 								<tr><td id="order_money">200</td></tr> -->
<!-- 								<tr style="background-color: #EEEEEE"><td>升数(L)</td></tr> -->
<!-- 								<tr><td id="order_vol">30</td></tr> -->
<!-- 							</table> -->
<!-- 						</div> -->
<!-- 					</div> -->
					<div class="border_box  box_font" style="border-radius: 10vw;margin-top: -25%;height: 120%;background-color: #E7C2CD;padding-top:3%;">
						<div style="background-color: #FFFFFF;display: flex;margin-top: 8%;">
							<div style="width:50%;color:#000000;padding-left: 8%;">枪号</div>
							<div class="box_item_right gun_no" style="color:#FF0000;">05</div>							
						</div>
						<div style="background-color: #FFFFFF;display: flex;margin-top: 8%;">
							<div style="width:50%;color:#000000;padding-left: 8%;">油品</div>							
							<div class="box_item_right" style="color:#FF0000;" id="">#0</div>							
						</div>
						<div style="background-color: #FFFFFF;display: flex;margin-top: 8%;">
							<div style="width:50%;color:#000000;padding-left: 8%;">单价(元/升)</div>							
							<div class="box_item_right" style="color:#FF0000;" id="">6.95</div>							
						</div>
						<div style="background-color: #FFFFFF;display: flex;margin-top: 8%;">
							<div style="width:50%;color:#000000;padding-left: 8%;">金额</div>							
							<div class="box_item_right" style="color:#FF0000;" id="">200元</div>							
						</div>
						<div style="background-color: #FFFFFF;display: flex;margin-top: 8%;">
							<div style="width:50%;color:#000000;padding-left: 8%;">油量(升)</div>							
							<div class="box_item_right" style="color:#FF0000;" id="">20升</div>							
						</div>
					</div>
				</div>
				<div id="again_show" style="display: none;">
					<div id="car_position_show" style="margin-top: -26%;height: 120%;">
<!--						<div class="signal_warining_car" id="again_img_content" style="left:0;">-->
<!--							<img id="again_img" style="width:90%;height: 85%;padding-top:15%;padding-left:3%;" class="car_too_bottom" src="img/car.png" alt="" />-->
<!--						</div>-->
<!--                         &lt;!&ndash; 车未在扫描区域 &ndash;&gt;-->
<!--						<img id="again_img_other" src="img/no_car.png" alt="" style="margin: 17% auto;height: 66%;"/>-->
<!--&lt;!&ndash; 						<div id="signal_info" style="width: 45%;position: absolute;right: 0;"> &ndash;&gt;-->
<!--&lt;!&ndash; 							<div style="padding: 32% 0 0 18%;"> &ndash;&gt;-->
<!--&lt;!&ndash; 								<img style="width:80%;height: 100%;margin-top: 15%" src="{$SITE_URL}/public/static/jhp/img/warning.png" alt="" /> &ndash;&gt;-->
<!--&lt;!&ndash; 							</div> &ndash;&gt;-->
<!--&lt;!&ndash; 						</div> &ndash;&gt;-->
<!--						<div>-->
                        <!-- 视频 -->
                        <div id="again_video" class="video-wrapper">
							<video id="video" autoplay="true" controls muted="muted" width="100%" height="100%" style="margin: 0 auto;display: flex"> </video>
							<!-- 视频上的框 -->
							<div id="video_content" class="video_line"></div>
						</div>
					</div>
					<div id="tank_cap_show" style="display: none;">
<!--						<div class="tank_warining_car" style="left:0;">-->
<!--							<img  style="width:55%;height: 85%;padding-top:17%;padding-left:7%;"  src="img/car.png" alt="" />-->
<!--							<div id="tank_tip" class="tank_tip tip_red" style="left:0;"></div>-->
<!--							<img  class="tank_warning_img"  src="img/warning_y.png" alt="" />-->
<!--						</div>-->
						<div style="width:100%;height:90%;background: #ffffff;">
							<img class="tank_warning_img" style="height: 80%;margin: 10% auto;display: flex;" src="img/warning_car_fuel_cap.png" alt="" />
						</div>
					</div>	
				</div>
				<div id="wait_show" style="display: none;text-align: center;margin-top:-5%;font-size: 5vw;font-family: Microsoft YaHei;font-weight: bold;">
					<div>
						<div id="check_img" style="display: none;width:100%;height:80%;margin-top: 16%">
							<div style="height: 38%">
								<img style="height:100%;margin: auto;" src="img/zy_ez.jpg" alt="" />
							</div>
						</div>
						<div id="refuel_img_open" style="display: none;width:100%;height:100%;background: #ffffff;">
							<img  style="height: 80%;margin: 10% auto;display: flex;" src="img/error_car_fuel_cap.png" alt="" />
						</div>
						<div id="refuel_img" style="display: none;width:100%;height:42%;">
							<img  style="width:100%;height: 100%;margin: auto;margin-top:51%;display: flex;" src="img/goods/refuel_logo.jpg" alt="" />
							<div></div>
						</div>
						<div id="refuel_img_close" style="display: none;width:100%;height:100%;">
							<img  style="width:88%;height: 78%;margin: auto;margin-top:20%;display: flex;" src="img/goods/refuel_logo.jpg" alt="" />
							<div></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="bottom_div" class="bottom_line line_red" style="box-shadow: 0px -16px 54px 0px rgba(176,11,3,0.31);">
	</div>
	
	<script src="js/index_bj.js"></script>
	<script type="text/javascript">
	
	</script>
</body>
</html>
